<template>
  <div :class="themeClass">
    <div class="rightBox" :style="{ right: right,}">
      <div class="rightBtn" @click="close" :style="{ background: themeClass == 'theme-dark' ? '#101620' : '#fff' }">
        <img src="../../assets/images/yjzy/wArrowIn.png" alt v-if="themeClass == 'theme-dark'" :style="{ transform: trans }" />
        <img src="../../assets/images/yjzy/jt.png" alt v-else :style="{ transform: trans }" />
      </div>
      <div class="contentBox">
        <div class="chartItem">
          <div class="itemTop">
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
          <h5 class="titleName">数据统计</h5>
          <div class="ecartsTips">
            <div class="tipItems">
              <!-- <span class="wz"></span>
              <span>应急物资点</span> -->
            </div>
            <div class="tipItems">
              <!-- <span class="az"></span>
              <span>安置点</span> -->
            </div>
            <div class="tipItems">
              <!-- <span class="lx"></span>
              <span>负责人联系点</span> -->
            </div>
          </div>
          <div class="echartsOne" ref="echartsOne"></div>
        </div>
        <div class="chartItem">
          <div class="itemTop">
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
          <h5 class="titleName">救援队伍</h5>
          <div class="echartsTwo" ref="echartsTwo"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { dataStatistics, rescueTeamStatistics } from '@/api/index.js'
import wz from '../../assets/images/yjzy/wz.png'
import az from '../../assets/images/yjzy/az.png'
import lx from '../../assets/images/yjzy/lx.png'
import tl from '../../assets/images/yjzy/tuli.png'
export default {
  data () {
    return {
      dataList: [],
      nameList: [],
      dataListTwo: [],
      right: '0px',
      zt: '',
      arr: [],
      arr1: [],
      arr2: [],
      trans: 'rotate(0deg)'
    }
  },
  created () {
    this.getDataStatistics()
    this.getRescueTeamStatistics()
  },
  mounted () {
    // this.initEchartsOne()
    // this.initEchartsTwo()
    // console.log(this.$store.getters.getTheme, 595959)
  },
  computed: {
    themeClass () {
      return `theme-${this.$store.getters.getTheme}`
    }
  },
  watch: {
    themeClass () {
      this.initEchartsOne()
      this.initEchartsTwo()
    }
  },
  methods: {
    close () {
      if (this.right === '-400px') {
        // 展开
        this.right = '0px'
        this.trans = 'rotate(0deg)'
      } else {
        // 关闭
        this.right = '-400px'
        this.trans = 'rotate(180deg)'
      }
    },
    getDataStatistics () {
      dataStatistics().then(res => {
        if (res.code === 200) {
          const { dataList, nameList } = res.result
          this.nameList = nameList
          this.dataList = dataList
          console.log(dataList, 666)
          this.arr = []
          this.arr1 = []
          this.arr2 = []
          dataList.forEach(e => {
            this.arr.push(e.data[0])
            this.arr1.push(e.data[1])
            this.arr2.push(e.data[2])
          })
          this.initEchartsOne()
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    getRescueTeamStatistics () {
      rescueTeamStatistics().then(res => {
        if (res.code === 200) {
          this.dataListTwo = res.result.dataList
          this.initEchartsTwo()
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    initEchartsOne () {
      const myChart = this.$echarts.init(this.$refs.echartsOne)
      if (this.themeClass === 'theme-light') {
        this.colors = '#646668'
      } else if (this.themeClass === 'theme-dark') {
        this.colors = '#fff'
      }
      const seriesLabel = {
        normal: {
          show: false,
          textBorderColor: '#333',
          textBorderWidth: 1
        }
      }
      const option = {
        legend: {
          data: [
            {
              name: '应急物资点',
              textStyle: {
                // fontSize: 12,
                // fontWeight: 'bolder',
                itemWidth: 14,
                itemHeight: 14,
                symbolKeepAspect: true,
                color: this.colors
              },
              icon: `image://${wz}`
            },
            {
              name: '安置点',
              textStyle: {
                // fontSize: 12,
                // fontWeight: 'bolder',
                itemWidth: 14,
                itemHeight: 14,
                symbolKeepAspect: true,
                color: this.colors
              },
              icon: `image://${az}`
            },
            {
              name: '负责人联系点',
              textStyle: {
                // fontSize: 12,
                // fontWeight: 'bolder',
                itemWidth: 14,
                itemHeight: 14,
                symbolKeepAspect: true,
                color: this.colors
              },
              icon: `image://${lx}`
            }
          ]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '30%',
          right: '4%',
          bottom: '20%',
          containLabel: false
        },
        xAxis: {
          type: 'value',
          name: 'Days',
          minInterval: 1,
          min: 0,
          max: function (value) {
            if (value.max < 50) {
              return 50
            }
          },
          splitLine: {
            interval: 0
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: this.colors
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          // data: ['Sunny', 'Cloudy', 'Showers'],
          data: this.nameList,
          axisLabel: {
            textStyle: {
              color: this.colors
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: '#fff'
                },
                {
                  offset: 1,
                  color: '#BBBFBF'
                }
              ])
            }
          }
        },
        // series: this.dataList
        series: [
          {
            name: '应急物资点',
            type: 'bar',
            data: this.arr,
            label: seriesLabel,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0,
                  color: '#025EEA' },
                { offset: 1,
                  color: '#00C0FA' }
              ])
            }
          },
          {
            name: '安置点',
            type: 'bar',
            label: seriesLabel,
            data: this.arr1,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0,
                  color: '#FD6450' },
                { offset: 1,
                  color: '#F28E26' }
              ])
            }
          },
          {
            name: '负责人联系点',
            type: 'bar',
            label: seriesLabel,
            data: this.arr2,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0,
                  color: '#38F8D4' },
                { offset: 1,
                  color: '#01E052' }
              ])
            }
          }
        ]
      }
      myChart.on('legendselectchanged', function (params) {
        const selected = params.selected
        const setiesName = params.name
        console.log(option, 'woshi')
        switch (setiesName) {
        case '应急物资点':
          if (!selected['应急物资点']) {
            option.legend.data[0].icon = `image://${tl}`
          } else {
            option.legend.data[0].icon = `image://${wz}`
          }
          break
        case '安置点':
          if (!selected['安置点']) {
            option.legend.data[1].icon = `image://${tl}`
          } else {
            option.legend.data[1].icon = `image://${az}`
          }
          break
        case '负责人联系点':
          if (!selected['负责人联系点']) {
            option.legend.data[2].icon = `image://${tl}`
          } else {
            option.legend.data[2].icon = `image://${lx}`
          }
          break
        }
        myChart.setOption(option)
      })
      myChart.setOption(option)
    },
    initEchartsTwo () {
      const myChart = this.$echarts.init(this.$refs.echartsTwo)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        color: [
          '#FF4D4A',
          '#62B6EF',
          '#7AE8F6',
          '#FF8B67',
          '#79EDBA',
          '#2EF47E',
          '#FFA621',
          '#E56241',
          '#3A76EC',
          '#045C9D',
          '#3D6BFF',
          '#ED267A',
          '#0E5788',
          '#03B2CB',
          '#E44516',
          '#1BCC45',
          '#7AFF31'
        ],
        series: [
          {
            type: 'pie',
            radius: 80,
            center: ['50%', '40%'],
            roseType: 'area',
            data: this.dataListTwo
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
@keyframes inBox {
  0% {
    right: -500px;
  }
  90% {
    right: 20px;
  }
  100% {
    right: 0;
  }
}
.rightBox {
  height: 100%;
  width: 26.25rem /* 400/16 */;
  display: flex;
  position: absolute;
  top: 0px;
  right: 0px;
  transition: right .5s;
  animation: inBox 0.5s linear;
}
.rightBtn {
  width: 24px /* 24/16 */;
  height: 54px /* 5/16 */;
  background: var(--Wbg-f);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.125rem /* 50/16 */;
  > img {
    width: 0.4375rem /* 7/16 */;
    height: 0.6875rem /* 11/16 */;
    transform: rotate(0deg);
  }
  cursor: pointer;
}
.contentBox {
  font-size: 30px;
  flex: 1;
  @include themify($themes) {
    background: themed('yjzy_charts_bg_color');
    background-image: themed('yjzy_charts_bg');
    background-position: -136px -322px;
  }
  // background: var(--Wbg-f);
  padding: 0 1.125rem /* 18/16 */;
  padding-top: 3rem /* 48/16 */;
  .chartItem {
    .itemTop {
      @include themify($themes) {
        border-bottom: 1px solid themed('yjzy_charts_border');
      }
      width: 22.75rem /* 364/16 */;
      height: 2px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.625rem /* 10/16 */;
      .dot {
        display: inline-block;
        height: 0.125rem /* 2/16 */;
        width: 0.375rem /* 6/16 */;
        @include themify($themes) {
          background: themed('yjzy_charts_color');
        }
      }
    }
    .titleName {
      font-size: 1.25rem /* 20/16 */;
      font-weight: 600;
      @include themify($themes) {
        color: themed('tj_color');
      }
      // color: #ffffff;
    }
    .ecartsTips {
      display: flex;
      justify-content: flex-end;
      .tipItems {
        margin-right: 1.25rem /* 20/16 */;
        margin-bottom: 1.125rem /* 18/16 */;
        // color: var(--Wfont-w);
        @include themify($themes) {
          color: themed('tj_color');
        }
        font-size: 0.75rem /* 12/16 */;
        > img {
          width: 1.25rem /* 20/16 */;
          height: 0.625rem /* 10/16 */;
          margin-right: 0.3125rem /* 5/16 */;
        }
      }
    }
    .echartsOne {
      height: 31.25rem /* 500/16 */ /* 600/16 */ /* 680/16 */;
      width: 100%;
    }
    .echartsTwo {
      height: 18.75rem /* 300/16 */ /* 200/16 */ /* 600/16 */ /* 680/16 */;
      width: 100%;
    }
  }
  .wz {
    display: inline-block;
    width: 25px;
    height: 19px;
    vertical-align: middle;
    background-image: url('../../assets/images/yjzy/wz.png');
  }
  .az {
    display: inline-block;
    width: 25px;
    height: 19px;
    vertical-align: middle;
    background-image: url('../../assets/images/yjzy/az.png');
  }
  .lx {
    display: inline-block;
    width: 25px;
    height: 19px;
    vertical-align: middle;
    background-image: url('../../assets/images/yjzy/lx.png');
  }
}
</style>
